<template>
  <div id="goods">
    <!--头部-->
    <header class="clearfix">
      <div class="returnBack">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="navBar">
        <mt-navbar fixed value="1">
          <mt-tab-item id="1">商品</mt-tab-item>
          <mt-tab-item id="2">详情</mt-tab-item>
          <mt-tab-item id="3">参数</mt-tab-item>
        </mt-navbar>
      </div>
    </header>
    <!--头部-->
    <!--内容-->
    <div class="page-content">
      <!--banner-->
      <div>{{equipmentWidth()}}</div>
      <div class="banner" v-bind:style="{height:eWidth+'px'}">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(pic,index) in data.goodsPic" :key="index">
            <img :src="pic" alt="goodsPic">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!--商品名称-->
      <div class="good-name">
        <div class="good-name-top">
          <div class="g-left">{{data.goodsName}}</div>
          <div class="g-right">
            <i class="iconfont icon-fenxiang"></i>
            <p>分享</p>
          </div>
        </div>
        <div class="good-price">
          <span class="price">￥{{data.price}}</span>
          <del class="original-price">￥{{data.originalPrice}}</del>
        </div>
        <div class="good-other">
          <p>
            <span>快递:</span>
            <span v-if="data.isMail">包邮</span>
            <span v-if="!data.isMail">不包邮</span>
          </p>
          <p>
            <span>库存:</span>
            <span>{{data.stock}}</span>
          </p>
          <p>
            <span>销量:</span>
            <span>{{data.salesVolume}}包</span>
          </p>
        </div>
      </div>
      <!--商品优惠-->
      <div class="goods-Discount" @touchstart="selectGoodsNum(2)">
        优惠 全场满 <span>￥{{data.discount}}</span>包邮
        <i class="iconfont icon-jiantou"></i>
      </div>
      <!--购买数量选择-->
      <div class="purchase-num" v-show="buyNum==1" @touchstart="selectGoodsNum(1)">
        请选择数量
        <i class="iconfont icon-jiantou"></i>
      </div>
      <div class="purchase-num" v-show="buyNum>1" @touchstart="selectGoodsNum(1)">
        已选：数量 <span>x{{buyNum}}</span>
        <i class="iconfont icon-jiantou"></i>
      </div>
      <!--其他商品-->
      <div class="other-goods">
        <div class="other-goods-top">
          <img :src="dataShop.shopPic" alt="pic">
          <div>
            <h2>{{dataShop.shopName}}</h2>
            <p>{{dataShop.shopIntroduce}}</p>
          </div>
        </div>
        <div class="other-goods-center">
          <div>
            <p>{{dataShop.all}}</p>
            <p>全部</p>
          </div>
          <div>
            <p>{{dataShop.new}}</p>
            <p>新品</p>
          </div>
          <div>
            <p>{{dataShop.promotion}}</p>
            <p>促销</p>
          </div>
        </div>
        <div class="other-goods-bottom">
          <a href="javascript:;">全部商品</a>
          <a href="javascript:;">进店逛逛</a>
        </div>
      </div>
      <!--上拉切换-->
      <div class="pull-up">
        <i class="iconfont icon-iconset0418"></i>
        <i class="iconfont icon-xiangxiajiantou"></i>
        上拉查看图文详情
      </div>
    </div>
    <!--内容-->
    <!--底部-->
    <footer>
      <div class="b-content">
        <div class="b-content-left clearfix">
          <p class="exist-icon">
            <i class="iconfont icon-xinxing"></i>
            <span>关注</span>
          </p>
          <p class="exist-icon">
            <i class="iconfont icon-dianpu"></i>
            <span>店铺</span>
          </p>
          <p class="exist-icon">
            <i class="iconfont icon-gouwuche goods-num-icon">
              <mt-badge size="large" :class="{'ellipse':data.purchase>9}" v-show="data.purchase-0">{{data.purchase}}</mt-badge>
            </i>
            <span >购物车</span>
          </p>
        </div>
        <div class="b-content-right">
          <a href="javascript:;" @touchstart="addShoppingCart(1)">加入购物车</a>
          <a href="javascript:;">立即购买</a>
        </div>


      </div>
    </footer>
    <!--底部-->

    <!--模态框-->
    <v-modal :myData="myData" v-show="isShow"></v-modal>
  </div>
</template>

<script>
  import Modal from '../modalFrame/index'


  export default {
    name: "index",
    data() {
      return {
        eWidth: '',
        data: "",
        dataShop: "",
        myData: "",
        buyNum: 1,
        isShow: false,
        numSelect:""
      }
    },
    methods: {
      equipmentWidth: function () {
        this.eWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

      },
      selectGoodsNum: function (num) {
        this.isShow = true;
        this.numSelect=num;
      },
      addShoppingCart: function (num) {
        this.myData.addShopping = true;
        this.isShow = true;
        this.numSelect=num;
      }
    },
    mounted() {
      this.$http.get("http://192.168.1.108:3000/api").then((data) => {
        this.data = data.body.data;
        this.dataShop = data.body.data.shop;
        this.myData = {
          "goodsPic": data.body.data.goodsPic[0],
          "stock": data.body.data.stock,
          "price": data.body.data.price,
          "buyNum": this.buyNum
        }
      });
    },
    components: {
      "v-modal": Modal
    }
  }
</script>

<style scoped>
  #goods {
    background-color: #fafafa;
  }

  a {
    text-decoration: none;
  }

  header {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d0d0d0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

  header .returnBack {
    float: left;
    width: 10%;
    padding: 17px 0;
    text-align: center;
  }

  header .returnBack .iconfont {
    color: #999999;
  }

  header .navBar {
    float: right;
    width: 90%;
    background-color: red;
  }

  .mint-navbar {
    background-color: #f7f7f7;
    position: static;
    color: #667cb3;
  }

  .page-content {
    padding: 52px 0 50px;
  }

  /*banner*/
  .banner {
    text-align: center;
  }

  .mint-swipe-item img {
    width: 100%;
  }

  .mint-swipe-item:nth-child(3) {
    background-color: #8c92ef;
  }

  /*商品名称*/
  .good-name {
    box-sizing: border-box;
    padding: 8px 10px 0;
    background-color: #fff;
    border-top: 1px solid #e7e7e7;
  }

  .good-name-top {
    display: flex;
    flex-flow: row;
  }

  .g-left {
    width: 86%;
    flex-grow: 8;
    font-size: 0.05rem;
  }

  .g-right {
    width: 16%;
    flex-grow: 2;
    text-align: center;
    font-size: 0.043rem;
    box-sizing: border-box;
    border-left: 1px solid #C0C0C0;
    padding-left: 6px;
  }

  .g-right .iconfont {
    font-size: 20px;
  }

  /*商品价格*/
  .good-price {
    line-height: 31px;
  }

  .good-price .price {
    font-size: 0.06rem;
    color: #ef4f4f;
    font-weight: 500;
  }

  .good-price .original-price {
    color: #C0C0C0;
    font-size: 0.037rem;
    padding-left: 8px;
  }

  /*其他*/
  .good-other {
    display: flex;
    flex-flow: row;
    height: 24px;
    color: #C0C0C0;
  }

  .good-other p {
    width: 33.333333%;
    flex-grow: 1;
    font-size: 0.04rem;

  }

  .good-other p:nth-child(2) {
    text-align: center;
  }

  .good-other p:nth-child(3) {
    text-align: right;
  }

  /*商品优惠*/
  .purchase-num {
    margin: 0.0266666rem 0;
  }

  .purchase-num, .goods-Discount {
    padding: 0.0266666rem;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
    border-left: 0;
    border-right: 0;
    color: #666;
    position: relative;
    font-size: 0.036rem;
    background-color: #fff;
  }

  .goods-Discount span {
    color: #ef4f4f;
    margin: 0 4px;
  }

  .goods-Discount .iconfont, .purchase-num .iconfont {
    color: #888;
    position: absolute;
    right: 0.0266666rem;;
    font-size: 0.05rem;

  }

  /*其他商品*/
  .other-goods {
    padding: 0 0.0266666rem 0.021333rem;
    background-color: #fff;
  }

  .other-goods-top {
    padding: 0.0266666rem 0;
    display: flex;
    flex-flow: row;
  }

  .other-goods-top img {
    width: 0.133333rem;
    height: 0.133333rem;
    flex-grow: 1;
  }

  .other-goods-top div {
    width: 0.813338rem;
    flex-grow: 1;
    box-sizing: border-box;
    padding-left: 10px;
    color: #333
  }

  .other-goods-top div h2 {
    font-size: 0.053333rem;
  }

  .other-goods-top div p {
    font-size: 0.048rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .other-goods-center {
    display: flex;
    flex-flow: row;
  }

  .other-goods-center div {
    flex-grow: 1;
    width: 33.333333%;
    box-sizing: border-box;
    margin: 0.021333rem;
    text-align: center;
    font-size: 0.042rem;
    color: #333;
  }

  .other-goods-center div p:nth-child(2) {
    color: #7c7c7c;
  }

  .other-goods-center div:nth-child(2) {
    border: 1px solid #dbdbdb;
    border-top: 0;
    border-bottom: 0;
  }

  .other-goods-bottom {
    margin: 0.021333rem 0;
    text-align: center;
  }

  .other-goods-bottom a {
    display: inline-block;
    width: 0.213333rem;
    height: 0.064rem;
    box-sizing: border-box;
    line-height: 0.064rem;
    border: 1px solid #7c7c7c;
    border-radius: 3px;
    font-size: 0.01rem;
    color: #7c7c7c;
    margin: 0 0.0266666rem;
  }

  /*上拉切换*/
  .pull-up {
    padding: 0 0.0266666rem;
    background-color: #fff;
    height: 0.16875rem;
    line-height: 0.16875rem;
    text-align: center;
    margin-top: 0.021333rem;
    box-sizing: border-box;
    border-top: 1px solid #e7e7e7;
    font-size: 0.05rem;
    color: #333;
  }

  .pull-up .iconfont {
    font-size: 0.05rem;
    color: #333;
    font-weight: bold;
  }

  .pull-up .icon-xiangxiajiantou {
    display: none;
  }

  /*底部所有操作*/
  footer {
    position: fixed;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border-top: 1px solid #e7e7e7;
    z-index: 1000;
    background-color: #fff;
    left: 0;
    bottom: 0;
  }

  footer .b-content {
    display: flex;
    flex-flow: row;
  }

  footer .b-content .b-content-left {
    flex-grow: 1;
    width: 37%;
    box-sizing: border-box;
    padding-top: 8px;
  }

  footer .b-content .b-content-left p {
    float: left;
    width: 33.333%;
    height: 50px;
    text-align: center;
    font-size: 0.02rem;
    color: #999;
  }

  .b-content-left p span {
    display: block;
  }

  .b-content-left p .iconfont {
    color: #999;
  }

  footer .b-content .b-content-right {
    flex-grow: 1;
    width: 63%;
  }

  footer .b-content .b-content-right a {
    line-height: 50px;
    text-align: center;
    color: #fff;
    float: left;
    width: 50%;

  }

  footer .b-content .b-content-right a:nth-child(1) {
    background-color: #fe9402;
  }

  footer .b-content .b-content-right a:nth-child(2) {
    background-color: #fd5555;
  }

  .goods-num-icon {
    position: relative
  }

 .b-content-left .goods-num-icon span {
    position: absolute;
    right: -10px;
    top: -6px;
    background-color: #f90500;
    color: #fff;
    padding: 2px 4px;
   font-size: 8px;
  }
  .b-content-left .goods-num-icon .ellipse{
    padding: 2px 4px;
  }
</style>
